<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dialog_basic</title>
    <link rel="stylesheet" type="text/css" href="/easyui.css">
    <link rel="stylesheet" type="text/css" href="/icon.css">
    <link rel="stylesheet" type="text/css" href="/demo.css">
    <script src="/jquery.min.js"></script>
    <script src="/jquery.easyui.min.js"></script>
</head>
<body>
<div id="dlg" >
    <div class="ftitle">User Information</div><hr />
    <form id="fm">
        <div class="fitem">
            <label>First Name:</label>
            <input name="firstname" class="easyui-validatebox" required="true">
        </div><br />
        <div class="fitem">
            <label>Last Name:</label>
            <input name="lastname" class="easyui-validatebox" required="true">
        </div><br/>
        <div class="fitem">
            <label>Phone:</label>
            <input name="phone">
        </div><br/>
        <div class="fitem">
            <label>Email:</label>
            <input name="email" class="easyui-validatebox" validType="email">
        </div><br/>
    </form>
</div>

<script type="text/javascript">

    $("#dlg").dialog({
        title:"Basic Dialog",
        close:true,
        iconCls:'icon-save',
        width:400,
        height:300,
        padding:10,
        buttons: [{
            text:'Ok',
            iconCls:'icon-ok',
            handler:function(){
                saveUser();
            }
        },{
            text:'Cancel',
            handler:function(){
                $('#dlg').dialog('close');
            }
        }]
    });
</script>
</body>
</html>